import React from 'react';
import ThemeItem from './Item';
import {WeaSelect} from 'ecCom';
import {Col, Row} from "antd";
import classNames from "classnames";
import ColorPicker from 'rc-color-picker';

import {defaultCfg, fontFamilyOpts, fontSizeOpts} from "../../../../../../constants/theme";

const layout = {
  Left: 'left',
  Center: 'center',
  Right: 'right'
};

const layoutOpts = [
  { key: layout.Left, selected: false, showname: '居左' },
  { key: layout.Center, selected: false, showname: '居中' },
  { key: layout.Right, selected: false, showname: '居右' }
];

const scope = 'submitBtn.css';
export default class ThemeSubmitBtnSetting extends React.Component {
  formatFW = () => {
    const { fontWeight } = this.props.data.css;

    if ('bold' === fontWeight) return 'normal';

    return 'bold';
  }

  onFileInputClick(){
    if(this.fileInput){
      this.fileInput.click()
    }
  };

  render() {
    const { onChange, data, onUploadImg } = this.props;

    const css = data && data.css || defaultCfg.submitBtn;
    const textAlign = data && data.textAlign || defaultCfg.submitBtn.textAlign;

    const { fontFamily, fontSize, fontWeight, color, backgroundColor } = css;
    const bold = 'bold' === fontWeight;

    return (
      <div>
        <h4>提交按钮</h4>
          <ThemeItem label='字体样式'>
            <Row style={{ padding: 0 }}>
              <Col span={7}>
                <WeaSelect
                  value={fontFamily}
                  options={fontFamilyOpts}
                  onChange={onChange(`${scope}.fontFamily`)}
                />
              </Col>
              <Col span={6} offset={1}>
                <WeaSelect
                  value={fontSize}
                  options={fontSizeOpts}
                  onChange={onChange(`${scope}.fontSize`)}
                />
              </Col>
              <Col span={4} offset={1}>
          <span
            onClick={onChange(`${scope}.fontWeight`, this.formatFW)}
            className={classNames('btn-font-weight', { bold })}
          >
            B
          </span>
              </Col>
              <Col span={4} offset={1}>
                <ColorPicker
                  color={color}
                  onChange={onChange(`${scope}.color`)}
                />
              </Col>
            </Row>
          </ThemeItem>
          <ThemeItem label='布局'>
            <WeaSelect
              detailtype={3}
              value={textAlign}
              options={layoutOpts}
              onChange={onChange('submitBtn.textAlign')}
            />
          </ThemeItem>
          <ThemeItem label='底色'>
            <ColorPicker
              color={backgroundColor}
              onChange={onChange(`${scope}.backgroundColor`)}
            />
          </ThemeItem>
      </div>
    )
  }
}